<template>
    <div id="search-component">
        <h4>Hero Search</h4>
        <input id="search-box" @keyup="search()" ref="searchInput"/>
        <ul class="search-result">
            <li v-for="hero in heroes$" :key="hero.id">
                <router-link :to="{name: 'HeroDetail', params: {id: hero.id}}">{{hero.name}}</router-link>
            </li>
        </ul>
    </div>
</template>

<script>
export default {
  data () {
    return {
      heroes$: []
    }
  },
  methods: {
    search: function () {
      this.$http.get('/heroes', {
        params: {
          name_like: this.$refs.searchInput.value
        }
      }).then(data => {
        this.heroes$ = data.data
      })
    }
  }
}
</script>
